<template>
  <div>
    <h1>game test</h1>
    <div id="game-map"></div>
    <button @click="human.jump">跳一下</button>
    <button @click="human.leftMove">向左移动</button>
    <button @click="human.rightMove">向右移动</button>
    <button @click="human.shooting">射击</button>
  </div>
</template>

<script lang="ts">

import { defineComponent, ref, onMounted } from 'vue';

import useHuman, { IHuman } from './hooks/useHuman';
import useMap from './hooks/useMap';
import useKeyboard from './hooks/useKeyboard';

export default defineComponent({
  setup() {
    const { register } = useKeyboard();
    const human = ref<IHuman>();
    onMounted(() => {
      const { info, draw, animationTask } = useMap('game-map');

      draw(human.value = useHuman('human-1', { animationTask, mapInfo: info}));
      register('a', human.value.leftMove)
      register('k', human.value.jump)
      register('d', human.value.rightMove)

    })

    return {
      human
    }
  },
}) 
</script>

<style scoped>

</style>